<template>
  <div class="page">
    <div class="setContent">
      <span>localPort:</span>
      <Input v-model="localPort" style="width: 80px" />
      <Button type="primary" @click="creatServer">creatServer</Button>
      <span>{{prompt}}</span>
    </div>
    <div class="dataContent">
      <Row>
        <Col span="12">
        <span class="hint">接收数组索引:</span>
        <Checkbox v-model="enODD_even">后一行为前一行回包</Checkbox>
        <Input v-model="recDataArrStr" type="textarea" :autosize="{minRows: 2,maxRows: 10}" clearable placeholder="Enter something..." />
        </Col>

        <Col span="12">
        <span class="hint">返回数组索引:</span>
        <Input v-model="sendDataArrStr" type="textarea" :autosize="{minRows: 2,maxRows: 10}" clearable placeholder="Enter something..." />
        </Col>
      </Row>
      <h2>Log</h2>
        <!-- <Input v-model="logRecStr" type="textarea" :autosize="{minRows: 2,maxRows: 10}" clearable /> -->
        <textarea name="" id="" cols="200" rows="10"></textarea>

    </div>
  </div>

</template>

<script type="text/ecmascript-6">
import { dataTools } from "@/components/utils/dataTools.js";
const dgrm = require("dgram");
let _UDPServer;

export default {
  data() {
    return {
      recDataArrStr: "",
      recDataArr: [],
      sendDataArrStr: "",
      sendDataArr: [],
      localPort: 8888,
      prompt: "",
      enODD_even: false,
      logRecStr: [] //日志记录数组
    };
  },
  methods: {
    creatServer: function() {
      let that = this;
      _UDPServer = null;
      _UDPServer = dgrm.createSocket("udp4"); //udp4为指定UDP通信的协议类型
      try {
        _UDPServer.bind(that.localPort, err => {
          //bind方法中也可以不写回调函数，单独监听listening事件
          var address = _UDPServer.address();
          that.prompt = `_UDPServer linsten at port：${address.port}`;
        });
      } catch (error) {
        console.error("创建端口失败", error);
      }

      _UDPServer.on("message", function(buf, rinfo) {
        that.logRecStr += `<<${buf.toString("hex")}`;
        let rebackBuf = that.getRebackBuff(buf) ? that.getRebackBuff(buf) : buf;
        console.log("rebackBuf", rebackBuf);

        _UDPServer.send(
          rebackBuf,
          0,
          rebackBuf.length,
          rinfo.port,
          rinfo.address
        );
        that.logRecStr += `>>${rebackBuf.toString("hex")}`;
      });
    },

    getRebackBuff(recMsg) {
      let reBackBuf = "";

      let recMsgHexStr = dataTools
        .hexStrAddSpace(recMsg.toString("hex"))
        .trim();

      let recMsgIndexOfUtils = this.recDataArr.findIndex(
        (value, index, arr) => {
          return recMsgHexStr == value;
        }
      );
      if (recMsgIndexOfUtils == -1) return reBackBuf;
      console.log(
        "recMsgIndexOfUtils:",
        recMsgIndexOfUtils,
        this.recDataArr[recMsgIndexOfUtils + 1]
      );

      let rebackStr = this.enODD_even
        ? this.recDataArr[recMsgIndexOfUtils + 1]
        : this.sendDataArr[recMsgIndexOfUtils];
      console.log("rebackStr:", rebackStr);

      let backArry = dataTools.hexStr2Arry(rebackStr);
      reBackBuf = new Buffer(backArry);

      return reBackBuf;
    }
  },
  components: {},
  watch: {
    recDataArrStr: function() {
      this.recDataArr = this.recDataArrStr.split("\n");
    },
    sendDataArrStr: function() {
      this.sendDataArr = this.sendDataArrStr.split("\n");
    }
  }
};
</script>

<style scoped >
.setContent:first-child {
  margin: 3px;
}
.ivu-col {
  /* margin: 1px; */
  padding: 5px;
}
</style>
